window.onload=function(){
    //首页二级菜单
    let menuLis = document.querySelectorAll('.s_menu li');
    let menuPs = document.querySelectorAll('.s_menu li p');
    let child_Menus = document.querySelectorAll('.child_menu');
    // console.log(menuLis,menuPs,child_Menus);
    for(let i=0;i<menuLis.length;i++){
        menuLis[i].addEventListener('mouseover',function(){
            menuPs[i].className = 'menu_active';
            child_Menus[i].className='child_menu posabs show';
         })
         menuLis[i].addEventListener('mouseleave',function(){
            menuPs[i].className = '';
            child_Menus[i].className='child_menu posabs';
         })
    }
    // 首页的主轮播图
    $("#bannerInner").tyslide({
        boxh: 430, //盒子的高度
        w: 1000, //盒子的宽度
        h: 400, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 20, //控制按钮宽度
        controlsH: 20, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#d7d7d7", //普通控制按钮的颜色
        controlsCurrentColor: "#ff6600", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
    // 5.选项卡
    let titles = document.querySelectorAll('.ebooktitle_right li');
    let items = document.querySelectorAll('.ebookcontent>li');
    for(let i = 0;i<titles.length;i++){
        titles[i].addEventListener('mouseover',function(){
        for(let j = 0;j<titles.length;j++){
            titles[j].className='fl';
            items[j].className='ebookcontent_item posabs';
        }
        titles[i].className='fl ebook_active';
            items[i].className='ebookcontent_item posabs ebook_show';
    })
    }
    $("#bannerInner1").tyslide({
        boxh: 220, //盒子的高度
        w: 336, //盒子的宽度
        h: 220, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner2").tyslide({
        boxh: 220, //盒子的高度
        w: 336, //盒子的宽度
        h: 220, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner3").tyslide({
        boxh: 220, //盒子的高度
        w: 336, //盒子的宽度
        h: 220, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner4").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner5").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner6").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner7").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner8").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner9").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner10").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner11").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
      $("#bannerInner12").tyslide({
        boxh: 342, //盒子的高度
        w:429, //盒子的宽度
        h: 342, //图片的高度
        isShow: true, //是否显示控制器
        isShowBtn: true, //是否显示左右按钮
        controltop: 0, //控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14, //控制按钮宽度
        controlsH: 2, //控制按钮高度
        radius: 10, //控制按钮圆角度数
        controlsColor: "#ffff", //普通控制按钮的颜色
        controlsCurrentColor: "#7f7f7f", //当前控制按钮的颜色
        isShowNum: true //是否显示数字
      });
    //   手风琴
      $('.ebook_rightBox ul li').hover(function () {
        // console.log(1111);
        //把当前li中标题 隐藏起来
        // $(this).find('h4').addClass('hide');
        $('h4', this).addClass('hide');
        //把当前 li中div 显示出来
        // $(this).find('div').removeClass('hide');
        $('div', this).removeClass('hide');
    
        //把当前li的同级兄弟中 h4和div设置成相反操作(h4显示  div 隐藏)
        $(this).siblings().find('h4').removeClass('hide');
        $(this).siblings().find('div').addClass('hide');
    
      });
    //楼层跳转
    let jumpImgs = document.querySelectorAll('.jump_img');
    let jumpText = document.querySelectorAll('.jump_text');
    let jumpLis = document.querySelectorAll('.jump li');
    let jump = document.querySelector('.jump');
    for(let i = 0;i<jumpImgs.length;i++){
        let offset = i * (-40);
        offset = offset + 'px';
        jumpImgs[i].style.background = "url('./img/floor.png')   no-repeat 0 " + offset + " #f2f2f2";
        }
        for(let i=0;i<jumpImgs.length;i++){
      jumpLis[i].addEventListener('mouseover',function(){
        let offset = i * (-40);
        offset = offset + 'px';
        jumpImgs[i].style.background = "url('./img/floor.png')   no-repeat -40px " + offset + " #93d46f";
        jumpText[i].style.display = "block";
      })
      jumpLis[i].addEventListener('mouseleave',function(){
        let offset = i*(-40);
        offset=offset+'px';
        jumpImgs[i].style.background="url(./img/floor.png) no-repeat 0 "+ offset +" #f2f2f2";
        jumpText[i].style.display="none"
        })
    }
    let back = document.querySelector('.back');
    // 顶部搜索框
    let topSearch = document.querySelector('.top-search');
    let oldInput = document.querySelector('#oldInput');
    let newInput = document.querySelector('#newInput');
    window.addEventListener('scroll',function(){
    let top = document.documentElement.scrollTop || document.body.scrollTop;
    if(top>1100){
    jump.style.display="block";
    back.style.display="block";
    }else{
    jump.style.display="none";
    back.style.display="none";
    }
    if(top>500){
      topSearch.style.height = '50px';
      topSearch.style.borderBottom = '1px solid #f60';
    }else{
      topSearch.style.height = '0';
      topSearch.style.border = "none";
    }
  })
    oldInput.addEventListener('input',function(){
      newInput.value = this.value;
    })
    newInput.addEventListener('input',function(){
      oldInput.value = this.value;
    })
    let a=0;
    back.addEventListener('click',function(){
    let top = document.documentElement.scrollTop || document.body.scrollTop;
    let times= setInterval(function(){
    top=top-200;
    document.documentElement.scrollTop=top;
    document.body.scrollTop=top;
    console.log(top);
    if(top<0){
    clearInterval(times);
    }
    },50)
    });
    // 6.选项卡
    let clothTitles = document.querySelectorAll('.clothBox_text li');
    let clothItems = document.querySelectorAll('.clothcontent_item');
    for(let i = 0;i<titles.length;i++){
        clothTitles[i].addEventListener('mouseover',function(){
        for(let j = 0;j<titles.length;j++){
            clothTitles[j].className='fl c3 f18';
            clothItems[j].className='clothcontent_item posabs';
        }
        clothTitles[i].className='fl c3 f18 cloth_active';
        clothItems[i].className='clothcontent_item posabs cloth_show';
    })
    };
// 7.选项卡
let sportsTitles = document.querySelectorAll('.sportsBox_text li');
let sportsItems = document.querySelectorAll('.sportscontent_item');
for(let i = 0;i<sportsTitles.length;i++){
    sportsTitles[i].addEventListener('mouseover',function(){
    for(let j = 0;j<sportsTitles.length;j++){
        sportsTitles[j].className='fl c3 f18';
        sportsItems[j].className='sportscontent_item posabs';
    }
    sportsTitles[i].className='fl c3 f18 sports_active';
    sportsItems[i].className='sportscontent_item posabs sports_show';
})
};
// 8.选项卡
let childrenTitles = document.querySelectorAll('.childrenBox_text li');
let childrenItems = document.querySelectorAll('.childrencontent_item');
for(let i = 0;i<childrenTitles.length;i++){
    childrenTitles[i].addEventListener('mouseover',function(){
    for(let j = 0;j<childrenTitles.length;j++){
        childrenTitles[j].className='fl c3 f18';
        childrenItems[j].className='childrencontent_item posabs';
    }
    childrenTitles[i].className='fl c3 f18 children_active';
    childrenItems[i].className='childrencontent_item posabs children_show';
})
};
// 10.选项卡
let extensionTitles = document.querySelectorAll('.extension_titleright li');
let extensionItems = document.querySelectorAll('.extensioncontent_item');
for(let i = 0;i<extensionTitles.length;i++){
  extensionTitles[i].addEventListener('mouseover',function(){
    for(let j = 0;j<extensionTitles.length;j++){
      extensionTitles[j].className='fl extension_li';
      extensionItems[j].className='extensioncontent_item posabs';
    }
    extensionTitles[i].className='fl extension_active';
    extensionItems[i].className='extensioncontent_item posabs extension_show';
})
};

  //把获得的永久级存储中的账户名显示到页面右上角 替换掉登录
  let headerRight = document.querySelector('.header_right');
  if(localStorage.getItem('name')){
    headerRight.innerHTML = `
    欢迎<span style="color:#f60">${localStorage.getItem('name')}</span>登录乐购商城
    `
  }
  
}